<head>
  <title>Leaderboard</title>
</head>

<body>
  <div id="outer">
    {{> d3vis}}
    {{> leaderboard}}
  </div>
</body>

<template name="leaderboard">
  <div class="leaderboard">
    <div class="players">
    {{#each players}}
      {{> player}}
    {{/each}}
    </div>
  </div>

  {{#if selected_name}}
  <div class="details">
    <div class="name">{{selected_name}}</div>
    <input type="button" class="inc" value="Give 5 points" />
  </div>
  {{/if}}

  {{#unless selected_name}}
  <div class="none">Click a player to select</div>
  {{/unless}}
</template>

<template name="d3vis">
  <div class="d3board" height="150px" width="600px">
    <svg id="d3vis"></svg>
  </div>
</template>

<template name="player">
  <div class="player {{selected}}">
    <span class="name">{{name}}</span>
    <span class="score">{{score}}</span>
  </div>
</template>

